<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/index.css">
    <script src="/js/vue.js" type="text/javascript"></script>
    <script src="/js/axios.js" type="text/javascript"></script>
    <script src="/js/index.js"></script>
</head>
<body style="background-color:#f5f6f7">
<div id="app">
    <div  th:include="common/common-nav::head"></div>

    <div  class="blogs_body" style="display: flex;flex-direction:row;">

        <div style="width:16%;height:46%;background-color: white;border-radius: 10px">

            <div  th:include="common/common-sidebar::pal"></div>

        </div>

        <div style="width: 82%;margin-left:2%;background-color: white;border-radius: 10px;">

            <div  th:include="common/common-type::type"></div>

        </div>

    </div>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                searchTitle:"",
                ul_li:[
                    {ref:"/api/hello/home",val:"个人资料"},
                    {ref:"/api/hello/collect",val:"我的收藏"},
                    {ref:"/api/hello/myBlog",val:"我的博客"},
                    {ref:"/api/hello/goType",val:"分类管理"}
                ],
                types:[],
                start:0,
                total:0,
                centerDialogVisible:false,
                type:{type:""},
                val:"添 加",

            }
        },
        methods:{
            pageChange(val){
                this.start = parseInt(val)-1
                let that = this
                axios.get("/api/hello/findByPage/" + this.start).then(
                    function (resp){
                        that.types = resp.data.data.types
                        that.total = resp.data.data.total
                    }
                )
            },

            findByTitle:function(){
                if(this.searchTitle==null || this.searchTitle == ""){
                    this.$notify({
                        title: '搜索不能为空',
                        type: 'warning'
                    });
                    return
                }
                sessionStorage.setItem('searchTitle',this.searchTitle)
                window.location.href = "/"
            },

            update(item){
                this.type = {...item}
            },

            add(){
                let that = this
                if(this.type.type==null || this.type.type==""){
                    this.$message({
                        message: '不能添加空类型',
                        type: 'warning'
                    });
                    return
                }
                axios.post("/api/hello/addType",that.type).then(function (resp){

                    if(resp.data.data!=null){
                        that.types = resp.data.data
                        that.$message({
                            showClose: true,
                            message: '添加成功',
                            type: 'success'
                        });
                        return
                    }

                    that.$message({
                        showClose: true,
                        message: '添加失败',
                        type: 'error'
                    });

                })
            },

            quXia(){
                this.type  = {type:""}

            },
            sub(index){
                console.log(index)
                let that = this
                axios.post("/api/hello/upType",that.type).then(function (resp){

                    if(resp.data.data){
                        that.$message({
                            showClose: true,
                            message: '修改成功',
                            type: 'success'
                        });
                        that.types[index].type = that.type.type
                        return
                    }

                    that.$message({
                        showClose: true,
                        message: '修改失败',
                        type: 'error'
                    });
                })

            },

            init:function(){
                let that = this
                axios.get("/api/hello/findByPage/" + 0).then(
                    function (resp){
                        that.types = resp.data.data.types
                        that.total = resp.data.data.total
                    }
                )
            },
        },
        mounted(){
            this.init()
        }
    })
</script>
<style>
    *{
        margin:0;
        padding:0;
    }
    a{
        text-decoration:none;
    }
    .el-menu--horizontal>.el-menu-item.is-active{
        border-bottom:none;
        color: #303133;
    }
    .blogs_body{
        width: 90%;
        height:600px;
        margin: 30px auto;
    }
    li{
        list-style-type:none;
        border-radius: 10px;
    }
    .li_type:hover{
        background:#f0f0f5;
    }
    .li_type:nth-child(4){
        background:#f0f0f5;
    }
</style>
</html>